<template>
  <div class="invoice-statistics-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="title-section">
        <h2 class="page-title">发票统计</h2>
        <el-tag type="success" effect="plain" class="version-tag">企业版</el-tag>
      </div>
      <div class="header-actions">
        <el-button type="primary" icon="el-icon-printer" @click="handlePrintReport">
          打印报表
        </el-button>
        <el-button icon="el-icon-download" @click="handleExportData">导出数据</el-button>
        <el-button icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
      </div>
    </div>

    <!-- 信息提示条 -->
    <el-alert
      title="发票统计数据每日凌晨更新，如需查看实时数据请点击刷新按钮。发票额度不足时请及时申请增加额度。"
      type="info"
      show-icon
      :closable="false"
      class="info-alert"
    />

    <!-- 日期选择器 -->
    <el-card class="period-selector-card" shadow="hover">
      <div class="period-selector">
        <div class="selector-label">
          <i class="el-icon-date"></i>
          <span>统计周期：</span>
        </div>
        <el-date-picker
          v-model="statisticsPeriod"
          type="month"
          placeholder="选择月份"
          format="yyyy年MM月"
          value-format="yyyy-MM"
          @change="handlePeriodChange"
        />
      </div>
    </el-card>

    <!-- 统计卡片区域 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon">
              <i class="el-icon-tickets"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">可用发票额度</div>
              <div class="stat-value">¥ {{ formatNumber(invoiceData.voiceQuota) }}</div>
              <div class="stat-progress">
                <el-progress
                  :percentage="getQuotaPercentage"
                  :color="getQuotaColor"
                  :show-text="false"
                ></el-progress>
                <span class="progress-text">{{ getQuotaPercentage }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon blue">
              <i class="el-icon-document"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">当前可用纸票数量</div>
              <div class="stat-value">{{ formatNumber(invoiceData.invoicePaperNum) }}</div>
              <div class="stat-progress">
                <el-progress
                  :percentage="getPaperPercentage"
                  :color="getPaperColor"
                  :show-text="false"
                ></el-progress>
                <span class="progress-text">{{ getPaperPercentage }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon green">
              <i class="el-icon-s-finance"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">本月已开蓝票</div>
              <div class="stat-value">{{ formatNumber(invoiceData.kpBlueNum) }}</div>
              <div class="stat-trend" :class="blueInvoiceTrend > 0 ? 'up' : 'down'">
                <i :class="blueInvoiceTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                <span>{{ Math.abs(blueInvoiceTrend) }}%</span>
                <span class="trend-label">较上月</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-card-content">
            <div class="stat-icon orange">
              <i class="el-icon-money"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">发票合计金额</div>
              <div class="stat-value">¥ {{ formatNumber(invoiceData.kphjje) }}</div>
              <div class="stat-trend" :class="invoiceAmountTrend > 0 ? 'up' : 'down'">
                <i :class="invoiceAmountTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                <span>{{ Math.abs(invoiceAmountTrend) }}%</span>
                <span class="trend-label">较上月</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <div class="chart-header">
            <div class="chart-title">
              <i class="el-icon-pie-chart"></i>
              <span>发票额度使用情况</span>
            </div>
          </div>
          <div class="chart-container" ref="quotaChart"></div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <div class="chart-header">
            <div class="chart-title">
              <i class="el-icon-data-line"></i>
              <span>发票开具趋势</span>
            </div>
          </div>
          <div class="chart-container" ref="trendChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细统计数据 -->
    <el-card class="detailed-stats-card" shadow="hover">
      <div slot="header" class="card-header">
        <div class="header-title">
          <i class="el-icon-s-data"></i>
          <span>详细统计数据</span>
        </div>
      </div>

      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="额度统计" name="quota">
          <el-table
            :data="quotaTableData"
            style="width: 100%"
            :header-cell-style="tableHeaderStyle"
            border
            stripe
          >
            <el-table-column label="指标名称" prop="name" min-width="180"></el-table-column>
            <el-table-column label="数值" min-width="120" align="right">
              <template slot-scope="scope">
                <span>{{ scope.row.prefix }}{{ formatNumber(scope.row.value) }}{{ scope.row.suffix }}</span>
              </template>
            </el-table-column>
            <el-table-column label="说明" prop="description" min-width="250"></el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="发票统计" name="invoice">
          <el-table
            :data="invoiceTableData"
            style="width: 100%"
            :header-cell-style="tableHeaderStyle"
            border
            stripe
          >
            <el-table-column label="指标名称" prop="name" min-width="180"></el-table-column>
            <el-table-column label="数值" min-width="120" align="right">
              <template slot-scope="scope">
                <span>{{ scope.row.prefix }}{{ formatNumber(scope.row.value) }}{{ scope.row.suffix }}</span>
              </template>
            </el-table-column>
            <el-table-column label="说明" prop="description" min-width="250"></el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="确认单统计" name="confirmation">
          <el-table
            :data="confirmationTableData"
            style="width: 100%"
            :header-cell-style="tableHeaderStyle"
            border
            stripe
          >
            <el-table-column label="指标名称" prop="name" min-width="180"></el-table-column>
            <el-table-column label="数值" min-width="120" align="right">
              <template slot-scope="scope">
                <span>{{ scope.row.prefix }}{{ formatNumber(scope.row.value) }}{{ scope.row.suffix }}</span>
              </template>
            </el-table-column>
            <el-table-column label="说明" prop="description" min-width="250"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 操作建议卡片 -->
    <el-card class="suggestions-card" shadow="hover">
      <div slot="header" class="card-header">
        <div class="header-title">
          <i class="el-icon-s-opportunity"></i>
          <span>操作建议</span>
        </div>
      </div>

      <div class="suggestions-content">
        <div v-if="getQuotaPercentage < 20" class="suggestion-item warning">
          <i class="el-icon-warning"></i>
          <span>您的发票额度即将用完，建议及时申请增加额度。</span>
          <el-button type="primary" size="small" @click="handleApplyQuota">申请额度</el-button>
        </div>

        <div v-if="getPaperPercentage < 20" class="suggestion-item warning">
          <i class="el-icon-warning"></i>
          <span>您的纸质发票数量较少，建议及时申请增加。</span>
          <el-button type="primary" size="small" @click="handleApplyPaper">申请纸票</el-button>
        </div>

        <div v-if="parseInt(invoiceData.dqdcl) > 0" class="suggestion-item">
          <i class="el-icon-bell"></i>
          <span>您有 {{ invoiceData.dqdcl }} 张待处理的确认单，请及时处理。</span>
          <el-button type="primary" size="small" @click="handleProcessConfirmation">立即处理</el-button>
        </div>

        <div v-if="getQuotaPercentage >= 20 && getPaperPercentage >= 20 && parseInt(invoiceData.dqdcl) === 0" class="suggestion-item normal">
          <i class="el-icon-success"></i>
          <span>您的发票使用情况正常，暂无特别建议。</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'InvoiceStatistics',
  data() {
    return {
      // 统计周期
      statisticsPeriod: '2025-04',

      // 发票数据
      invoiceData: {
        voiceQuota: '150000.00',
        invoiceQuotaUsed: '350000.00',
        invoiceAmount: '500000.00',
        invoicePaperNum: '120',
        invoicePaperNumUsed: '280',
        kpBlueNum: '156',
        kphjse: '75000.00',
        kphjje: '425000.00',
        byhtsxed: '15000.00',
        wfht: '5000.00',
        byyzcjxse: '3500.00',
        bysddhpje: '12000.00',
        byfcdqrd: '45',
        bysddqrd: '38',
        dqdcl: '7'
      },

      // 趋势数据
      blueInvoiceTrend: 12.5,
      invoiceAmountTrend: 8.3,

      // 图表实例
      quotaChart: null,
      trendChart: null,

      // 当前活动标签页
      activeTab: 'quota'
    }
  },
  computed: {
    // 表格样式
    tableHeaderStyle() {
      return {
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 500,
        height: '50px'
      }
    },

    // 额度使用百分比
    getQuotaPercentage() {
      const used = parseFloat(this.invoiceData.invoiceQuotaUsed);
      const total = parseFloat(this.invoiceData.invoiceAmount);
      return Math.round((used / total) * 100);
    },

    // 额度进度条颜色
    getQuotaColor() {
      const percentage = this.getQuotaPercentage;
      if (percentage > 80) return '#F56C6C';
      if (percentage > 60) return '#E6A23C';
      return '#67C23A';
    },

    // 纸票使用百分比
    getPaperPercentage() {
      const used = parseInt(this.invoiceData.invoicePaperNumUsed);
      const available = parseInt(this.invoiceData.invoicePaperNum);
      const total = used + available;
      return Math.round((used / total) * 100);
    },

    // 纸票进度条颜色
    getPaperColor() {
      const percentage = this.getPaperPercentage;
      if (percentage > 80) return '#F56C6C';
      if (percentage > 60) return '#E6A23C';
      return '#67C23A';
    },

    // 额度统计表格数据
    quotaTableData() {
      return [
        {
          name: '可用发票额度',
          value: this.invoiceData.voiceQuota,
          prefix: '¥ ',
          suffix: '',
          description: '当前可开具发票的剩余额度'
        },
        {
          name: '已使用发票额度',
          value: this.invoiceData.invoiceQuotaUsed,
          prefix: '¥ ',
          suffix: '',
          description: '已开具发票的累计金额'
        },
        {
          name: '发票总额度',
          value: this.invoiceData.invoiceAmount,
          prefix: '¥ ',
          suffix: '',
          description: '企业可开具发票的总额度'
        },
        {
          name: '本月回退发票额度',
          value: this.invoiceData.byhtsxed,
          prefix: '¥ ',
          suffix: '',
          description: '本月因红字发票等原因回退的额度'
        },
        {
          name: '未分配回退',
          value: this.invoiceData.wfht,
          prefix: '¥ ',
          suffix: '',
          description: '尚未分配的回退额度'
        }
      ]
    },

    // 发票统计表格数据
    invoiceTableData() {
      return [
        {
          name: '当前可用纸票数量',
          value: this.invoiceData.invoicePaperNum,
          prefix: '',
          suffix: ' 张',
          description: '当前可使用的纸质发票数量'
        },
        {
          name: '已使用发票张数',
          value: this.invoiceData.invoicePaperNumUsed,
          prefix: '',
          suffix: ' 张',
          description: '已使用的纸质发票数量'
        },
        {
          name: '本月已开具蓝票张数',
          value: this.invoiceData.kpBlueNum,
          prefix: '',
          suffix: ' 张',
          description: '本月开具的蓝字发票数量'
        },
        {
          name: '发票累计税额',
          value: this.invoiceData.kphjse,
          prefix: '¥ ',
          suffix: '',
          description: '已开具发票的累计税额'
        },
        {
          name: '发票合计金额',
          value: this.invoiceData.kphjje,
          prefix: '¥ ',
          suffix: '',
          description: '已开具发票的合计金额（含税）'
        },
        {
          name: '本月应转出进项税额',
          value: this.invoiceData.byyzcjxse,
          prefix: '¥ ',
          suffix: '',
          description: '本月应转出的进项税额'
        },
        {
          name: '本月共收到红字发票金额',
          value: this.invoiceData.bysddhpje,
          prefix: '¥ ',
          suffix: '',
          description: '本月收到的红字发票金额'
        }
      ]
    },

    // 确认单统计表格数据
    confirmationTableData() {
      return [
        {
          name: '本月发出的确认单',
          value: this.invoiceData.byfcdqrd,
          prefix: '',
          suffix: ' 张',
          description: '本月发出的确认单数量'
        },
        {
          name: '本月收到的确认单',
          value: this.invoiceData.bysddqrd,
          prefix: '',
          suffix: ' 张',
          description: '本月收到的确认单数量'
        },
        {
          name: '当前待处理的确认单',
          value: this.invoiceData.dqdcl,
          prefix: '',
          suffix: ' 张',
          description: '当前需要处理的确认单数量'
        }
      ]
    }
  },
  methods: {
    // 格式化数字
    formatNumber(num) {
      if (!num) return '0';
      return parseFloat(num).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).replace(/\.00$/, '');
    },

    // 初始化图表
    initCharts() {
      // 初始化额度使用情况图表
      this.quotaChart = echarts.init(this.$refs.quotaChart);
      this.quotaChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['已使用额度', '可用额度']
        },
        series: [
          {
            name: '发票额度',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: parseFloat(this.invoiceData.invoiceQuotaUsed),
                name: '已使用额度',
                itemStyle: { color: '#F56C6C' }
              },
              {
                value: parseFloat(this.invoiceData.voiceQuota),
                name: '可用额度',
                itemStyle: { color: '#67C23A' }
              }
            ]
          }
        ]
      });

      // 初始化发票开具趋势图表
      this.trendChart = echarts.init(this.$refs.trendChart);

      // 模拟过去6个月的数据
      const months = [];
      const invoiceAmounts = [];
      const invoiceCounts = [];

      const currentDate = new Date(this.statisticsPeriod + '-01');
      for (let i = 5; i >= 0; i--) {
        const date = new Date(currentDate);
        date.setMonth(date.getMonth() - i);
        const month = date.toLocaleString('zh-CN', { month: 'short' });
        months.push(month);

        // 模拟数据
        const baseAmount = 400000 + Math.random() * 100000;
        const baseCount = 140 + Math.random() * 40;

        invoiceAmounts.push((baseAmount / 10000).toFixed(2));
        invoiceCounts.push(Math.round(baseCount));
      }

      this.trendChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['发票金额(万元)', '发票数量(张)']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: months
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(万元)',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#5470C6'
              }
            }
          },
          {
            type: 'value',
            name: '数量(张)',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#91CC75'
              }
            }
          }
        ],
        series: [
          {
            name: '发票金额(万元)',
            type: 'bar',
            data: invoiceAmounts,
            itemStyle: {
              color: '#5470C6'
            }
          },
          {
            name: '发票数量(张)',
            type: 'line',
            yAxisIndex: 1,
            data: invoiceCounts,
            itemStyle: {
              color: '#91CC75'
            },
            lineStyle: {
              width: 3
            },
            symbol: 'circle',
            symbolSize: 8
          }
        ]
      });
    },

    // 处理周期变更
    handlePeriodChange(val) {
      console.log('统计周期变更:', val);
      // 实现周期变更逻辑，重新加载数据
      this.$message({
        message: `已切换至 ${val} 统计数据`,
        type: 'success'
      });

      // 重新初始化图表
      this.$nextTick(() => {
        this.initCharts();
      });
    },

    // 打印报表
    handlePrintReport() {
      this.$message({
        message: '正在准备打印报表...',
        type: 'info'
      });

      setTimeout(() => {
        this.$message({
          message: '报表已发送至打印队列',
          type: 'success'
        });
      }, 1500);
    },

    // 导出数据
    handleExportData() {
      this.$message({
        message: '正在导出数据...',
        type: 'info'
      });

      setTimeout(() => {
        this.$message({
          message: '数据导出成功',
          type: 'success'
        });
      }, 1500);
    },

    // 刷新数据
    handleRefresh() {
      this.$message({
        message: '正在刷新数据...',
        type: 'info'
      });

      setTimeout(() => {
        // 模拟数据刷新
        this.invoiceData.voiceQuota = (parseFloat(this.invoiceData.voiceQuota) - 5000).toFixed(2);
        this.invoiceData.invoiceQuotaUsed = (parseFloat(this.invoiceData.invoiceQuotaUsed) + 5000).toFixed(2);
        this.invoiceData.kpBlueNum = (parseInt(this.invoiceData.kpBlueNum) + 2).toString();
        this.invoiceData.kphjje = (parseFloat(this.invoiceData.kphjje) + 5000).toFixed(2);

        // 重新初始化图表
        this.$nextTick(() => {
          this.initCharts();
        });

        this.$message({
          message: '数据已刷新',
          type: 'success'
        });
      }, 1500);
    },

    // 申请额度
    handleApplyQuota() {
      this.$prompt('请输入申请额度（元）', '申请发票额度', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9]\d*$/,
        inputErrorMessage: '请输入正确的金额'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: `已提交申请，申请额度: ${value} 元`
        });
      }).catch(() => {});
    },

    // 申请纸票
    handleApplyPaper() {
      this.$prompt('请输入申请数量（张）', '申请纸质发票', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9]\d*$/,
        inputErrorMessage: '请输入正确的数量'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: `已提交申请，申请数量: ${value} 张`
        });
      }).catch(() => {});
    },

    // 处理确认单
    handleProcessConfirmation() {
      this.$router.push({
        name: 'InvoiceConfirmation'
      });
    },

    // 窗口大小变化时重绘图表
    resizeCharts() {
      this.quotaChart?.resize();
      this.trendChart?.resize();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();

      // 监听窗口大小变化，重绘图表
      window.addEventListener('resize', this.resizeCharts);
    });
  },
  beforeDestroy() {
    // 销毁图表实例
    this.quotaChart?.dispose();
    this.trendChart?.dispose();

    // 移除事件监听
    window.removeEventListener('resize', this.resizeCharts);
  }
}
</script>

<style scoped>
.invoice-statistics-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 页面标题样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title {
  font-size: 22px;
  color: #303133;
  margin: 0;
}

.version-tag {
  font-size: 12px;
  height: 22px;
  line-height: 20px;
  padding: 0 8px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 信息提示条样式 */
.info-alert {
  margin-bottom: 20px;
}

/* 周期选择器样式 */
.period-selector-card {
  margin-bottom: 20px;
}

.period-selector {
  display: flex;
  align-items: center;
  gap: 16px;
}

.selector-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

/* 统计卡片样式 */
.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
  margin-bottom: 20px;
}

.stat-card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background-color: #ecf5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon i {
  font-size: 28px;
  color: #409eff;
}

.stat-icon.blue {
  background-color: #ecf5ff;
}

.stat-icon.blue i {
  color: #409eff;
}

.stat-icon.green {
  background-color: #f0f9eb;
}

.stat-icon.green i {
  color: #67c23a;
}

.stat-icon.orange {
  background-color: #fdf6ec;
}

.stat-icon.orange i {
  color: #e6a23c;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.stat-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-text {
  font-size: 12px;
  color: #909399;
}

.stat-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.up {
  color: #f56c6c;
}

.stat-trend.down {
  color: #67c23a;
}

.trend-label {
  color: #909399;
  margin-left: 4px;
}

/* 图表样式 */
.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 360px;
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-title i {
  font-size: 18px;
  color: #409eff;
}

.chart-container {
  height: 300px;
}

/* 详细统计数据卡片样式 */
.detailed-stats-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-title i {
  font-size: 18px;
  color: #409eff;
}

/* 操作建议卡片样式 */
.suggestions-card {
  margin-bottom: 20px;
}

.suggestions-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
  background-color: #f0f9eb;
}

.suggestion-item i {
  font-size: 20px;
  color: #67c23a;
}

.suggestion-item span {
  flex: 1;
  color: #303133;
}

.suggestion-item.warning {
  background-color: #fdf6ec;
}

.suggestion-item.warning i {
  color: #e6a23c;
}

.suggestion-item.normal {
  background-color: #f0f9eb;
}

.suggestion-item.normal i {
  color: #67c23a;
}

/* 响应式样式 */
@media screen and (max-width: 1200px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .period-selector {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media screen and (max-width: 768px) {
  .invoice-statistics-container {
    padding: 10px;
  }

  .header-actions {
    flex-direction: column;
  }

  .header-actions .el-button {
    width: 100%;
  }

  .suggestion-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .suggestion-item .el-button {
    margin-top: 8px;
    width: 100%;
  }
}
</style>
